<!DOCTYPE html>
<html style="-webkit-overflow-scrolling: touch;">
<head>
    <title>scroll-test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<script type="text/javascript" src = "./MySwipe.js"></script>

<div class="content">
<div id="father" class="father">
    <div id="children1" style="background-color: #000000" class="children1">
        <div style="background-color: #00B7FF; height: 110%" id = "c1Child1" class="c-c"></div>
    </div>
    <div style="height: 40px; background-color: #c60000"></div>
    <div id = "children2" class="children"></div>
</div>
</div>
<script>
    children1.style.height = window.outerHeight+200+'px'
    var options = {
        dom: {
            parent: father,
            child1: children1,
            c1child1: c1Child1,
            child2: children2,
            transit:"" //过度元素dom
        },
        animateTime: 500,//过度持续时间
        transitH: 30,//过度时需要超过的高度条件, 若有过度元素dom,则优先考虑过度元素dom的高度
        transitText: {//过度元素内所要显示的文案
            start: "第一屏开始",
            move1: "第一屏正在拖拽",
            move2:"第二屏正在拖拽",
            end: "第二屏开始"
        }
    }
    var swipe = new MySwipe(options);
    swipe.init();

</script>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .content{
        height: 100%;
        overflow: hidden;
    }
    .father {
        background-color: #999;
        width: 100%;
        height: 100%;
    }
    .children1 {
        height: 100%;
        overflow-y: auto;
    }
    .children1 .c-c{
        height: 110%;
    }
    .children {
        background-color: #ccc;
        height: 200px;
        width: 100%;
        overflow-y: auto;
    }
</style>
</body>
</html>